<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>Document</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			.box{
				position:relative;
				width:400px;
				height:400px;
				background:red;
			}
			.box div{
				position:absolute;
				top:300px;
				left:150px;
				width:50px;
				height:50px;
				background:yellow;
				border-radius:50%;
				animation:boxdiv 2s linear infinite forwards;
			}
			@keyframes boxdiv{
				0%{}
			25%{margin-top:50px;}
			50%{margin-top:-50px;}
				75%{margin-left:-50px;}
				100%{
					margin-left:50px;
				}
			}
		</style>
	</head>
	<body>
		
		<div class="box">
			<div></div>
		</div>		
		

		
		
	</body>
</html>
